/**
 * 智能文档管理页面
 */

import { useState } from 'react';
import { DocumentProvider } from '@/contexts/document';
import ResizablePanel from '@/components/document/ResizablePanel';
import CategoryTree from '@/components/document/CategoryTree';
import DocumentToolbar from '@/components/document/DocumentToolbar';
import DocumentList from '@/components/document/DocumentList';
import DocumentDetail from '@/components/document/DocumentDetail';
import FileUploader from '@/components/document/FileUploader';
import BatchOperationBar from '@/components/document/BatchOperationBar';

export default function DocumentPage() {
  const [showUploader, setShowUploader] = useState(false);
  const [leftPanelCollapsed, setLeftPanelCollapsed] = useState(false);
  const [rightPanelCollapsed, setRightPanelCollapsed] = useState(false);
  const [leftPanelWidth, setLeftPanelWidth] = useState(300);
  const [rightPanelWidth, setRightPanelWidth] = useState(300);

  return (
    <DocumentProvider>
      <div className="h-screen flex flex-col bg-background">
        {/* 页面标题 */}
        <div className="bg-card border-b border-border px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-foreground">智能文档管理</h1>
              <p className="text-sm text-muted-foreground mt-1">
                管理您的个人文档，支持分类、标签、搜索和关联检查项
              </p>
            </div>
          </div>
        </div>

        {/* 主要内容区域 */}
        <div className="flex-1 flex overflow-hidden">
          {/* 左侧分类面板 */}
          <ResizablePanel
            defaultWidth={leftPanelWidth}
            minWidth={200}
            maxWidth={500}
            position="left"
            collapsed={leftPanelCollapsed}
            onWidthChange={setLeftPanelWidth}
            onToggleCollapse={() => setLeftPanelCollapsed(!leftPanelCollapsed)}
          >
            <CategoryTree />
          </ResizablePanel>

          {/* 中间主内容区域 */}
          <div className="flex-1 flex flex-col bg-card">
            {/* 工具栏 */}
            <DocumentToolbar onUpload={() => setShowUploader(true)} />
            
            {/* 文档列表 */}
            <div className="flex-1 overflow-y-auto">
              <DocumentList />
            </div>
            
            {/* 批量操作栏 */}
            <BatchOperationBar />
          </div>

          {/* 右侧详情面板 */}
          <ResizablePanel
            defaultWidth={rightPanelWidth}
            minWidth={200}
            maxWidth={500}
            position="right"
            collapsed={rightPanelCollapsed}
            onWidthChange={setRightPanelWidth}
            onToggleCollapse={() => setRightPanelCollapsed(!rightPanelCollapsed)}
          >
            <DocumentDetail />
          </ResizablePanel>
        </div>

        {/* 文件上传弹窗 */}
        <FileUploader
          isOpen={showUploader}
          onClose={() => setShowUploader(false)}
        />
      </div>
    </DocumentProvider>
  );
}
